<template>
  <div class="discovery-page">
    <header>
      <span>发现</span>
    </header>
    
    <div class="content">
      <div class="section-title">
        <h2>热门商家</h2>
        <span class="more">查看更多 <i class="fa fa-angle-right"></i></span>
      </div>
      
      <div class="card-list">
        <div class="card">
          <div class="card-img"></div>
          <div class="card-title">美食推荐</div>
          <div class="card-desc">发现附近的美食</div>
        </div>
        
        <div class="card">
          <div class="card-img special"></div>
          <div class="card-title">新店开业</div>
          <div class="card-desc">尝鲜优惠多多</div>
        </div>
        
        <div class="card">
          <div class="card-img third"></div>
          <div class="card-title">限时优惠</div>
          <div class="card-desc">折扣好礼等你拿</div>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
</script>

<style scoped>
.discovery-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 14vw; /* 为底部导航留出空间 */
  background-color: #f5f5f5;
}

header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;
  text-align: center;
  line-height: 12vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.content {
  padding: 14vw 4vw 4vw;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vw;
}

.section-title h2 {
  font-size: 4.5vw;
  font-weight: 600;
  color: #333;
}

.more {
  color: #0097ff;
  font-size: 3.2vw;
}

.card-list {
  display: flex;
  overflow-x: auto;
  padding: 2vw 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.card {
  flex: 0 0 auto;
  width: 40vw;
  background: #fff;
  border-radius: 2vw;
  overflow: hidden;
  margin-right: 3vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  scroll-snap-align: start;
}

.card-img {
  height: 20vw;
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.card-img.special {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.card-img.third {
  background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.card-title {
  font-size: 3.8vw;
  font-weight: 600;
  color: #333;
  padding: 2vw 3vw 1vw;
}

.card-desc {
  font-size: 3.2vw;
  color: #999;
  padding: 0 3vw 3vw;
}
</style> 